@extends('WShop::layout')
@push('styles')
<style >
    .mui-queren-dingdan .mui-input-row input{background: #fff;border: none;padding: 5px 15px;float: initial;width: 100%;font-size: 13px;border: 1px solid #eee;}
    .mui-queren-dingdan .mui-user-xx-header{padding:0 10px 10px;position: relative;margin: 10px;}
    .mui-queren-dingdan .mui-user-xx-header a{display: block;}
    .mui-queren-dingdan .mui-user-xx-header a img{width:150px;height: 150px;}
    .mui-queren-dingdan .mui-user-xx-header p{margin-top: 12px;}
    .mui-queren-dingdan .mui-user-xx-header p span{color: #333;font-size: 20px;vertical-align: top;}
    .mui-queren-dingdan .mui-input-row a{display: block;padding: 10px 15px;color: #777;}
    .mui-queren-dingdan .mui-input-row a span{color: #333;font-size: 20px;vertical-align: top;}
    .mui-queren-dingdan .mui-user-xx-header .mui-sc-pz{position: absolute;width: 100px;height: 100px;top: 20px;left: 10px;opacity: 0;}

    .mui-queren-dingdan ul li .flexs {
        margin-top: 15px;
    }
    .mui-queren-dingdan ul li .flexs textarea {
        border: none;
        padding: 0;
        font-size: 13px;
    }
</style>
@endpush
@section('content')
    @include('WShop::public.header')
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-bottom">
                <div class="mui-queren-dingdan ">
                    <form id="apply-pay" action="{{route('f_Wap_Upgrade_apply_match_send_pay')}}" method="post">
                        {{csrf_field()}}
                        <ul class="mui-table-view bg-fff">

                        <li style="background: #f2f2f2;height: 10px;"></li>
                        <li class="mui-table-view-cell time">
                           <div class="mui-dingdan-xx bg-fff flex">
                                <div class="mui-pull-right mui-text-center mui-text-red">
                                    ￥<span style="font-size: 48px;">{{$pay_info->pay_money}}</span>
                                </div>
                            </div>
                        </li></ul>

                        <ul class="mui-table-view mui-table-view-radio bg-fff zhifu" style="margin-top: 0;">

                            <li class="mui-table-view-cell">
                                <a href="javascript:;" class="mui-navigate-right">
                                   收款人:{{$pay_info->HandUser['nickname']}}
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a href="javascript:;" class="mui-navigate-right">
                                    收款微信:{{$pay_info->HandUserInfo['weichat']}}
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <div style="text-align: center;margin-top: ">收款码</div>
                                <img src="{{$pay_info->HandUserInfo['receiving_code']}}"  style="width: 150px;height: 150px;margin-top: 10px;margin-left: 26.5%" alt="">

                            </li>
                            <li class="mui-table-view-cell">
                                <div class="flex flexs">
                                    <div style="width: 100px;margin-left: 6px;">备注：</div>
                                    <textarea name="remark" rows="" cols="" placeholder="请输入备注信息"></textarea>
                                </div>

                            </li>
                        </ul>

                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">上传凭证</div>
                            <a href="javascript:;">
                                <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview" />

                                <input type="hidden" name="voucher" id="voucher" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)"  />

                        </div>
                        <input type="hidden" name="order_id" id="order_id" value="{{$pay_info->id}}" />
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="footer1 flex">
        <div class="footer1-left flex-item" >
            <div class="footer1-left-icon" id="btn_Tab_GoPingdan">
                <a href='javascript:;' class="footer1-left-money">确认支付</a>
            </div>
        </div>
    </div>
@endsection
@push('scripts')

<script>
    function imgPreview(fileDom) {

        //判断是否支持FileReader
        if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if(!imageType.test(file.type)) {
            mui.alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
            var load =  layer.open({type: 2});
            $.ajax({
                type: 'post',
                url: '{{route('f_Upload_uploadBase64')}}',
                dataType: 'json',
                data: {
                    imgField:'voucher',
                    voucher: e.target.result,
                    group:'head_img',
                    _token:'{{csrf_token()}}'
                }
            }).done(function (response) {
                if(response.status){
                    // console.log(response);
                    $('#voucher').val(response.data.url);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast(XMLHttpRequest.responseJSON.msg);
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {
                layer.close(load);
            });
        };
        reader.readAsDataURL(file);
    }
</script>
    <script>
        document.getElementById("btn_Tab_GoPingdan").addEventListener("tap", function() {
            mui.confirm('确认支付订单？','',function(e){
                if(e.index==1){
                    var load =  layer.open({type: 2});
                    var url = $('#apply-pay').attr('action');
                    var voucher = $('#voucher').val();

                    if (voucher) {
                        $.ajax({
                            type: 'post',
                            url: url,
                            dataType: 'json',
                            data: $('#apply-pay').serialize()
                        }).done(function (response) {
                            if(response.status){
                                tooltips(response.msg,6);
                                setTimeout(function () {
                                    location.href = response.url;
                                }, 2000);
                            }else{
                                tooltips(response.msg,5);
                            }
                        }).fail(function (XMLHttpRequest) {
                            if (XMLHttpRequest.status == 422) {
                                var errors = XMLHttpRequest.responseJSON.errors;
                                if(typeof errors == 'object') {
                                    for (var index in errors) { // 不推荐这样
                                        tooltips(errors[index][0]);
                                        break;
                                    }
                                }else{
                                    tooltips(XMLHttpRequest.responseJSON.msg);

                                }
                            }else{
                                tooltips('网络异常,请检查连接');
                            }

                        }).always(function () {
                            layer.close(load);
                        });
                    }else {
                        tooltips('请检查打款凭证是否符合要求，且不能为空');
                        layer.close(load);
                    }

                    function tooltips(msg) {
                        mui.toast(msg);
                    }
                }
            })
        });
    </script>
@endpush